<template>

  <div class="personal">
    <el class="person">个人中心</el>
    <el-form label-width="200">
      <el-form-item label="" class="person" >
        <div class="avatarContent">
          <img src="" alt="" class="avatar">
          <el-button type="primary" class="updateAvatar">
            修改头像
          </el-button>

        </div>


      </el-form-item>
      <el-form-item label="姓名:">
        <el-input v-model="userName" placeholder="请输入姓名" class="custom-input">
          <template slot="prepend"></template>
        </el-input>
        <el-button type="text" icon="el-icon-edit" @click="editUserName">编辑</el-button>

        <!-- 编辑姓名的模态框 -->
        <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
          <el-form :model="form">
            <el-form-item label="Promotion name" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="Zones" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="Please select a zone">
                <el-option label="Zone No.1" value="shanghai" />
                <el-option label="Zone No.2" value="beijing" />
              </el-select>
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogFormVisible = false">Cancel</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">

              </el-button>
            </div>
          </template>
        </el-dialog>


      </el-form-item>

        <el-form-item label="手机号">
          <el-input v-model="phoneNumber" placeholder="请输入手机号" class="custom-input">
            <template slot="prepend"></template>
          </el-input>
          <el-button type="text" icon="el-icon-edit" @click="editPhoneNumber">编辑</el-button>
          </el-form-item>

      <el-form-item label="密码:">
        <el-input v-model="passWord" placeholder="请输入密码" class="custom-input" type="password">
          <template slot="prepend"></template>
        </el-input>
        <el-button type="text" icon="el-icon-edit" @click="editPassWord">编辑</el-button>
      </el-form-item>








    </el-form>
  </div>
</template>

<script setup lang="ts">
let phoneNumber= ref('')
  const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  })
  const dialogTableVisible = ref(false)
  const dialogFormVisible = ref(false)
  const formLabelWidth = '140px'
  const gridData = [
    {
      date: '2016-05-02',
      name: 'John Smith',
      address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
      date: '2016-05-04',
      name: 'John Smith',
      address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
      date: '2016-05-01',
      name: 'John Smith',
      address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
      date: '2016-05-03',
      name: 'John Smith',
      address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
  ]
  let userName = ref('')
  let showEditNameDialog= false // 控制编辑姓名模态框的显示与隐藏
  const editNameForm= { // 编辑姓名表单的数据
    newName: ''
  }
  const passWord= ref('')
  function editUserName() {
      dialogFormVisible.value=true;
  }
    // ... 其他方法 ...

  function editPhoneNumber() {
    alert('正在编辑手机号: ' + phoneNumber);
      // 这里可以添加实际的编辑逻辑
  }
  function editPassWord() {
    // 注意：密码通常不会直接显示，这里只是演示
    alert('正在编辑密码: ' + (passWord ? '******' : '无密码'));
    // 这里可以添加实际的编辑逻辑
  }
  function updateName() {
    // 假设这里只是简单地更新数据，实际中可能需要发送请求到后端
    if (editNameForm.newName) {
      userName.value = editNameForm.newName; // 更新姓名
      showEditNameDialog = false; // 关闭模态框
    } else {
      alert('请输入新的姓名！');
    }
  }
  function resetDialog() {
    // 重置表单，用于下次打开模态框时清空数据
    editNameForm.newName = '';
  }
</script>




<style scoped>
.personal{
  .avatar{
    margin-top: 50px;
    margin-bottom: 10px;
    width:100px;
    height: 100px;
    border-radius: 50%;
    background: #1b2a47;
    display: block;
  }
  .updateAvatar{
    margin-bottom: 30px;
    margin-left: 8px
  }
}
.custom-input{
  margin-bottom: 20px;
  width: 400px;
}
.dialog-footer {
  text-align: right;
}
.reserve{
  margin-top: 75px;
  margin-left: 100px;
  background: #1b2a47;

}

.person{

  font-size: 30px;
  font-family: 'Arial', sans-serif;
  color: #1b2a47;
}
</style>

